.page-index{
    .m-menu{
        width: 230px;
        height: 475px;
        // border: 1px solid;
        margin-top: -50px;
        margin-left: 20px;
        position: relative;
        background: linear-gradient(-180deg, rgba(2,181, 157, .85) 2%, rgba(22, 146, 183,  .85) 100%);
        dt{
          height: 50px;
          padding-top: 15px;
          box-sizing: border-box;
          font-size: 16px;
          margin-left: 15px;
          margin-bottom: 10px;
      }
      dd{
          position: relative;
          box-sizing: border-box;
          padding: 2px 12px;
          height: 26px;
          cursor: pointer;
          &:hover{
              background: rgba(255, 255, 255, .2);
              &>i{
                  opacity: .1;
              }
          }
        }
      }


    .nav{
        font-size: 13px;
        dd>i{
            font-family: 'meituan';
            font-size: 14px;
            font-style: normal;
            opacity: .3;
            margin-right: 11px;
            &:before{
                width: 14px;
                height: 14px;
                display: inline-block;
            }
        }
        .food {
            &:before {
              content: "\e622";
            }
          }
  
          .takeout {
            &:before {
              content: "\e630";
            }
          }
  
          .hotel {
            &:before {
              content: "\e62a";
            }
          }
  
          .homestay {
            &:before {
              content: "\e631";
            }
          }
  
          .movie {
            &:before {
              content: "\e62c";
              position: relative;
              left: -2px;
            }
          }
          .airport {
            &:before {
              content: "\e632";
            }
          }
  
          .ktv {
            &:before {
              content: "\e627";
            }
          }
  
          .life {
            &:before {
              content: "\e633";
            }
          }
  
          .hair {
            &:before {
              content: "\e626";
              transform: scale(0.7);
            }
          }
  
          .marry {
            &:before {
              content: "\e629";
            }
          }
  
          .offspring {
            &:before {
              content: "\e623";
            }
          }
  
          .sport {
            &:before {
              content: "\e62b";
            }
          }
  
          .furniture {
            &:before {
              content: "\e625";
            }
          }
  
          .study {
            &:before {
              content: "\e624";
            }
          }
  
          .health {
            &:before {
              content: "\e628";
            }
          }
  
          .bar {
            &:before {
              content: "\e621";
            }
          }

          .arrow{
              width: 4px;
              height: 4px;
              border-bottom: 1px solid #fff;
              border-right: 1px solid #fff;
              transform: rotate(-45deg);
              display: block;
              position: absolute;
              right: 13px;
              top: 0;
              bottom: 0;
              margin: auto;
          }
    }
    .detail{
        padding: 0 30px;
        position: absolute;
        left: 230px;
        bottom: 0;
        width: 400px;
        height: 416px;
        background: #fff;
        z-index: 9999;
        h4 {
            font-size: 16px;
            font-weight: 500;
            margin-top: 24px;
            height: 22px;
            line-height: 22px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e5e5e5;
            color: #222;
          }
          span{
            color: #999;
            font-size: 12px;
            line-height: 15px;
            display: inline-block;
            margin-right: 16px;
            margin-top: 10px;
            cursor: pointer;
  
            &:hover {
              color: #31BBAC;
            }
          }
    }
}
.m-header {
    .search-panel {
      padding-bottom: 35px;
      z-index: 999;
    }
}

.m-life{
    .nav{
        list-style: none;
        display: flex;
        margin-top: -35px;
        margin-left: 50px;
        li{
            font-weight: 700;
            font-size: 16px;
            margin: 0 20px;
            cursor: pointer;
            position: relative;
            &:first-child{
                margin-left: 0;
            }
            a {
                color: #222;
                text-decoration: none;
                &:hover {
                  color: #f04d4e;
                }
        
                &.takeout1:hover {
                  color: #fbc700;
                }
        
                &.apartment:hover {
                  color: #FDC411;
                }
        
                &.business:hover {
                  color: #31BBAC;
                }
              }
        }
    }
    .slide{
        height: 240px;
        // width: 540px;
        margin: 10px;
        img{
            height: 240px;
        }
    }
    .m-life-pic{
        margin:10px 10px 10px 0px;
        width:150px;
        height:240px;
        background:url(//p0.meituan.net/codeman/e473bb428f070321269b23370ff02ba956209.jpg);
        background-size:150px;
    }
    .m-life-login{
        margin: 10px 0 10px 0;
        box-sizing: border-box;
        height: 240px;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px;
        .m-life-login-name{
            margin-bottom: 10px;
        }
        button{
            width: 118px;
            margin: 5px;
            box-sizing: border-box;
            &:hover{
                color: #606266;
                background: #e5e5e5;
                border: none;
            }
        }
        h4{
            img{
                width: 47px;
                height: 47px;
                border-radius: 50%;
                border: 4px solid #e5e5e5;
            }
        }
        
    }
    .m-life-hotel,
    .m-life-music {
      height: 165px;
      background:url(http://p1.meituan.net/codeman/8cce56c467a17e04f3094d1e455462a0132772.png);
      background-size: 270px;
      background-position: 50%;
      background-repeat: no-repeat;
      margin-right: 10px;
      margin-left: 10px;
    }
    .m-life-music {
        background: url(//p1.meituan.net/codeman/16442c19da1f1c4544f794e29d99c92051716.jpg);
        margin-left:0;
    }
    .m-life-coop {
        background: url(//p1.meituan.net/codeman/5b21cddb4bb1cbc3a9c3bce0f726c75940469.jpg);
        width: 150px;
        height: 165px;
        background-size: 150px;
      }
    .m-life-downapp{
        background: #fff;
        height: 165px;
        text-align: center;
        img{
            width: 95px;
            height: 95px;
            margin-top: 10px;
        }
        p{
            font-size: 16px;
            color: #222;
            font-weight: 500;
        }
        .last-p {
            font-size: 12px;
            font-weight: 500;
            margin-top: 2px;
            span {
                color: #EC5330;
                margin-right: 5px;
              }
    
              em {
                color: #3f3f3f;
                font-style: normal;
              }
        }
    }
}